import React from 'react'
import './style.css';
// 引入路由规则组件
import Index from '../router6-1/Index';
import { Link, NavLink, useNavigate } from 'react-router-dom'
import { useState } from 'react'

type Props = {};

export default function Father({ }: Props) {
    const [id, setId] = useState(100);

    const navigate = useNavigate()
    console.log('navigate', navigate);

    return (
        <>
            {/* 声明式导航 */}
            {/*传参方式1: 使用查询字符串形式 */}
            {/* <NavLink to={'/home?id=' + id}>首页</NavLink> */}
            {/* 传参方式2:使用动态路由 */}
            {/* <NavLink to={'/category/' + id}>分类</NavLink> */}
            {/* 传参方式3:对象形式 查询字符串 */}
            {/* <NavLink to={{
                pathname: '/cart',
                search: 'id=' + id
            }}>购物车</NavLink> */}
            {/* 传参方式3:对象形式 隐式传参 和router@5有区别 */}
            {/* <NavLink to='/mine' state={{ id: id }}>我的</NavLink> */}

            {/* 编程式导航 */}
            <p>
                {/* 查询字符串传参同上 */}
                <span onClick={() => {
                    navigate('/home')
                }}>首页</span>
                {/* 动态路由传参同上 */}
                <span onClick={() => {
                    navigate('/catefory/' + id)
                }}>分类</span>
                {/* 对象形式 传参同上*/}
                <span onClick={() => {
                    navigate({
                        pathname: '/cart',
                        search: 'id=' + id
                    })
                }}>购物车</span>
                {/* 隐式传参 */}
                <span onClick={() => {
                    navigate('/mine', {
                        state: {
                            id: id
                        }
                    })
                }}>我的</span>
            </p>
            <Index></Index>
        </>
    )
}